<template>
    <div class="category_detail">
      <div class="el_new_header clearfix">
        <div class="el_header_weather_info clearfix">
          <div class="el_header_name">{{title}}</div>
          <div class="el_header_weather">{{title}}</div>
        </div>
        <div class="el_header_search_box clearfix">
          <el-input v-model="input" placeholder="搜索商家、商品"></el-input>
        </div>
        <div class="el_recommend_list">
          <router-link to="/" v-for = 'x in recommend_list' :key="x.id">
            {{x.search_word}}
          </router-link>
        </div>
      </div>
      <swipe class="my-swipe">
        <swipe-item class="slide1" v-for="x in category_list" :key="x.index">
          <router-link to="/">
            <div class="category_list" v-for="item in x">
              <img :src="item.image_url"  :alt="item.title">
              <p>{{item.title}}</p>
            </div>
          </router-link>
        </swipe-item>
      </swipe>
      <div class="el_main_content clearfix">
        <h3>推荐商家</h3>
        <div class="el_main_content_wrap clearfix">
          <div class="el_shop_icon">
            <img src="https://fuss10.elemecdn.com/1/32/c75a72f674052473fb35b5c8ab1d7jpeg.jpeg?imageMogr/format/webp/" style="width: 30px;" alt="">
          </div>
          <div class="el_shop_intro">
            <div class="el_shop_name">南京麦当劳水西门大街店</div>
            <div class="el_rate">
              <span class="el_month_sell">月售1844单</span>
            </div>
            <div class="el_delivery">
              <span class="el_delivery_start">￥起送/配送费￥</span>
              <span class="el_distance">km/分钟</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default{
    data(){
      return{
        category_list:[],
        title:'',
        temperature:'',
        description:'',
        input:'',
        recommend_list:[]
      }
    },
    methods:{
      get_category(){
        this.axios.get('/v2/index_entry?geohash='+this.$route.params.shop_geo+'&group_type=1&flags[]=F')
          .then((res)=>{
            let category_list_1 = [],
                category_list_2 = [],
                len = res.data.length;
            if(len>8){
              for(let i = 0;i<len-8;i++){
                category_list_1.push(res.data[i]);
              }
              for(let a = 8;a<len;a++){
                category_list_2.push(res.data[a]);
              }
              this.category_list.push(category_list_1,category_list_2)
            }else {
              for(let i = 0;i<len;i++){
                category_list_1.push(res.data[i]);
              }
              this.category_list.push(category_list_1)
            }
            for(let b = 0;b<this.category_list.length;b++){
              for(let c = 0;c<this.category_list[b].length;c++){
                  this.category_list[b][c].image_url = 'https://fuss10.elemecdn.com'+this.category_list[b][c].image_url;
              }
            }
          })
          .catch((res)=>{
            console.log(res);
          })
      },
      get_shop_position(){
        this.axios.get('/v2/pois/'+this.$route.params.shop_geo)
          .then((res)=>{
            console.log(res);
            this.title = res.data.address;
            this.axios.get('/bgs/weather/current?latitude='+res.data.latitude+'&longitude='+res.data.longitude+'&offset=0&limit=20&extras[]=activities')
              .then((res)=>{
                console.log(res);
              })
              .catch((res)=>{
                console.log(res);
              });
            this.axios.get('/shopping/v3/hot_search_words?latitude='+res.data.latitude+'&longitude='+res.data.longitude)
              .then((res)=>{
                this.recommend_list = res.data;
              })
              .catch((res)=>{
                console.log(res);
              })
          })
          .catch((res)=>{
            console.log(res);
          })
      }
    },
    created(){
        this.get_category();
        this.get_shop_position();
    }
  }
</script>
<style lang="sass">
  @import "../assets/stylesheets/category.scss";
</style>
